<template>
	<view :style="'height:' +windowHeight+'px'">

		<view class="head">
			<view class="" :style="{'height':  statusBarHeight+'px'}"></view>
			<view class="head__on" :style="{'width':windowWidth+'px','height':  naviBarHeight+'px'}">
				<view @click="isBack" class="head__on__img">
					<image src="/static/icon/fanhui.png" style="width: 35rpx;height: 35rpx;" mode=""></image>
				</view>
				<view style="font-size: 32rpx;color: #000000;">我的上报</view>
			</view>
		</view>
		<view class="" :style="{'height': Number(statusBarHeight + naviBarHeight)+'px'}"></view>
		
		<view class="search">
			<view class="search__box">
				<input class="search__box__input" confirm-type="text" type="text" @confirm="searchText" v-model="title"/>
				<view class="search__box__content" v-if="title == ''">
					<image class="search__box__content__img" src="/static/icon/search.png" mode=""></image>
					<view class="search__box__content__text">
						<text>请输入关键词</text>
					</view>
				</view>
				<view class="search__box__icon" v-if="title != ''" @click="reset">
					<image class="search__box__icon__img" src="/static/icon/password_icon_del.png" mode=""></image>
				</view>
			</view>
		</view>
		<scroll-view v-if="my_report_list.length > 0" scroll-with-animation refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="triggered" scroll-x="false" @scrolltolower="initMore" style="margin-top: 25rpx;width: 100%;margin: 0;padding: 0rpx 43rpx;box-sizing: border-box;background-color: #FDFDFD;padding-top: 40rpx;"
		 scroll-y="true" class="" :style="'height:'+ Number(windowHeight - 60 -  Number(statusBarHeight + naviBarHeight))+'px'">
			<view class="list-unit" v-for="(item,index) in my_report_list" :key="index"  @click="navigateToPage(index)">
				<view class="list-top">
					<view class="" style="background: linear-gradient(#3172b6 0%, #8bc0f7 100%);border-radius: 0px 0px 20rpx 20rpx;
			color: #FFFFFF;width: 180rpx;height: 80rpx;font-size: 32rpx;display: flex;align-items: center;justify-content: center;">
						{{item.status_dictText}}
					</view>
					<view class="" style="display: flex;align-items: center;font-size: 30rpx;color: #999999;">
						查看<image src="../../static/icon/tubiao.png" style="width: 12rpx;height: 20rpx;margin-left: 10rpx;" mode=""></image>
					</view>
				</view>
				<view class="list-bottom">
					<view class="list-bottom__unit">
						<view class="text">
							上报单位:<text style="color: #666666;font-size: 26rpx;">{{item.depId_dictText}}</text>
						</view>
					</view>
					<view class="list-bottom__unit" style="margin-top: 30rpx;">
						<view class="text">
							上报时间：<text style="color: #666666;font-size: 26rpx;">{{item.createTime}}</text>
							
						</view>
					</view>
					<view v-if="item.status == 9" @click.stop="DelReport(item.id)" class="list-bottom__no">删除</view>
				</view>
			</view>
			<view class="" style="height: 150rpx;">
				
			</view>
		</scroll-view>


		<view class="" v-else :style="'height:'+ Number(windowHeight - 60 -  Number(statusBarHeight + naviBarHeight) - 49 - 60)+'px'"
		 style="width: 100%;display: flex;align-items: center;justify-content: center;">
			<image src="../../static/icon/kong_icon_bg.png" style="width: 422rpx;height: 298rpx;" mode=""></image>
		</view>
		<!-- 删除 -->
		<view class="bounced" v-if="is_out">
			<view class="bounced__box">
				<view class="bounced__box__title">
					确认删除
				</view>
				<view class="bounced__box__button">
					<view class="bounced__box__button__no" @click="goBack">取消</view>
					<view class="bounced__box__button__yes" @click="goLogin">确定</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import moment from '../../utils/moment.min.js';
	import {Debounce} from 'common/utils.js' // 防抖函数（减少函数的调用）
	
	export default {
		data() {
			return {
				my_report_list: [],
				pageNo: 1, //当前页数
				pageSize: 20, //每页数量
				is_page: true, //是否存在分页
				title: '', //模糊查询
				state_img: true,
				freshing: false,
				triggered: false,
				is_out:false,
				bounced_id: ''
			};
		},
		props: {
			windowWidth: { //系统界面宽度
				type: Number,
				default () {
					return 0;
				}
			},
			windowHeight: { //系统界面高度
				type: Number,
				default () {
					return 0;
				}
			},
			statusBarHeight: { //状态栏高度
				type: Number,
				default () {
					return 0;
				}
			},
			naviBarHeight: { //导航栏高度
				type: Number,
				default () {
					return 0;
				}
			}
		},

		mounted() {
			this.init()
			this.freshing = false;
			uni.$on('updateMyReport_event', (data) => {
				this.pageNo = 1
				this.title = ''
				this.init()
			})
		},
		methods: {
			init() {
				this.$appReport.fAppReportMyReport({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					title: this.title
				}).then((res) => {
					let data = res.data.result.records
					// console.log(data);
					if (data.length > 0) {
						this.is_page = true
					} else {
						this.is_page = false
					}
					data.forEach((item, index) => {
						item.createTime = moment(item.createTime).format('YYYY.MM.DD');
						switch (Number(item.status)) {
							case 0:
								item.status_dictText = '未处理'
								break;
							case 1:
								item.status_dictText = '处理中'
								break;
							case 2:
								item.status_dictText = '已驳回'
								break;
							case 3:
								item.status_dictText = '已完成'
								break;
							case 9:
								item.status_dictText = '待上报'
								break;
						}
					})
					// console.log(data);
					this.my_report_list = data;
					// console.log(this.my_report_list)
				})
			},
			isBack() {
				this.$emit('isBack');
			},
			navigateToPage(index) {

				switch (Number(this.my_report_list[index].status)) {
					case 0: //未处理
						uni.navigateTo({
							url: '/pages/solveProblem/disposeDetails?id=' + this.my_report_list[index].id
						})
						break;
					case 1: //处理中
						var schedule = "ing" //我的上报处理结果 
						uni.navigateTo({
							url: '/pages/solveProblem/disposeDetails?id=' + this.my_report_list[index].id
						})
						break;

					case 2: //已驳回
						var schedule = "reject" //我的上报处理结果 
						uni.navigateTo({
							url: '/pages/solveProblem/disposeDetails?id=' + this.my_report_list[index].id
						})
						break;
					case 3: //已解决
						uni.navigateTo({
							url: '/pages/solveProblem/disposeDetails?id=' + this.my_report_list[index].id
						})
						break;
					case 9: //未处理
						uni.navigateTo({
							url: '/pages/solveProblem/reportDetails?id=' + this.my_report_list[index].id
						})
						break;
				}
			},
			initMore() {

				if (this.is_page) {
					this.pageNo++
					this.$appReport.fAppReportMyReport({
						pageNo: this.pageNo,
						pageSize: this.pageSize,
						title: this.title
					}).then((res) => {
						let data = res.data.result.records
						console.log(data);
						if (data.length > 0) {
							this.is_page = true
						} else {
							this.is_page = false
						}
						data.forEach((item, index) => {
							item.createTime = moment(item.createTime).format('YYYY.MM.DD');
							switch (Number(item.status)) {
								case 0:
									item.status_dictText = '未处理'
									break;
								case 1:
									item.status_dictText = '处理中'
									break;
								case 2:
									item.status_dictText = '已驳回'
									break;
								case 3:
									item.status_dictText = '已完成'
									break;
								case 9:
									item.status_dictText = '待上报'
									break;
							}
						})
						console.log(data);
						this.my_report_list = this.my_report_list.concat(data);
						console.log(this.my_report_list)
					})
					this.switchState()
				}

			},
			searchText:Debounce(
			function(){
				this.pageNo = 1
				this.my_report_list = []
				this.init()
			}),
			reset() {
				this.title = ''
				this.pageNo = 1
				this.my_report_list = []
				this.init()
				
			},
			/**
			 * @name 下拉刷新
			 */
			onRefresh() {
				if (this.freshing) return;
				this.triggered = true;
				this.pageNo = 1
				this.init()
				this.freshing = true;
				setTimeout(() => {
				    this.triggered = false;
				    this.freshing = false;
				}, 2000)
			},
			/**
			 * @name 删除上报
			 */
			DelReport: Debounce(
				function(id) {
					this.is_out = !this.is_out
					this.bounced_id = id
				}),
				goBack() {
					this.is_out = !this.is_out
				},
				goLogin:Debounce(
				function(){
					this.is_out = !this.is_out
					this.$appReport.fAppReportDelReport({
						id: this.bounced_id
					}).then((res) => {
						console.log(res);
						uni.showToast({
						    title: '删除成功',
						    duration: 400,
							icon:'none'
						});
						this.init()
					}).catch(err => {
						console.log(err);
					})
				}),
			switchState() {
				this.state_img = !this.state_img
				if (this.state_img) {
					this.my_report_list.sort(function(a, b) {
						return a.status - b.status
					})
				} else {
					this.my_report_list.sort(function(a, b) {
						return b.status - a.status
					})
				}

			}

		}
	}
</script>

<style lang="scss">
	.head {
		position: fixed;top: 0;left: 0;right: 0;background-color: #FFFFFF;border-bottom: 1px solid #f8f8f8;
		&__on {
			display: flex;align-items: center;justify-content: center;position: relative;
			&__img {
				position:absolute;left: 43rpx;height: 100%;display: flex;align-items: center;justify-content: center;font-size: 32rpx;color: #000000;
			}
		}
	}
	.search {
		width: 100%;
		height: 94rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		&__box {
			width: 700rpx;
			height: 80rpx;
			background-color: #F6F6F6;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			&__input {
				width: 600rpx;
				height: 80rpx;
				position: relative;
				left: 30rpx;
			}
			&__content {
				height: 80rpx;
				background-color: #F6F6F6;
				display: flex;
				align-items: center;
				justify-content: center;
				position: absolute;
				left: 74rpx;
				&__img {
					width: 24rpx;
					height: 24rpx;
				}
				&__text {
					height: 80rpx;
					border-radius: 30rpx;
					display: flex;
					align-items: center;
					font-size: 30rpx;
					color: rgba(153, 153, 153, 1);
					margin-left: 13rpx;
				}
			}
			&__icon {
				width: 30rpx;height: 80rpx;border-radius: 50%;margin-left: 42rpx;display: flex;align-items: center;justify-content: center;
				&__img {
					width: 30rpx;height: 30rpx;border-radius: 50%;
				}
			}
		}
	}
	.text-oneline {
		display: inline-block;
		white-space: nowrap;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.list-unit {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #FFFFFF;
		box-shadow: 0px 5rpx 20rpx 5rpx rgba(226, 226, 226, 0.43);
		margin-bottom: 40rpx;
		padding-bottom: 50rpx;
		border-radius: 20rpx;
	}

	.list-top {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 58rpx 0rpx 37rpx;
	}

	.list-bottom {
		flex: 1;
		margin-top: 43rpx;
		padding: 0rpx 61rpx;
		display: flex;
		flex-direction: column;
		border-top: 1px solid #f8f8f8;
		padding-top: 43rpx;
		position: relative;

		&__unit {
			display: flex;
			align-items: center;

			.text {
				flex: 1;
				color: #333333;
				font-size: 30rpx;
				display: flex;
				align-items: center;
			}
		}
		&__no {
			font-size: 30rpx;color: #cc0e1e;padding: 15rpx 40rpx;position: absolute;right: 36rpx;top: 92rpx;
		}
	}
	.bounced {
		width: 100%;height: 100%;background-color: rgba(0,0,0,0.5); position: fixed;top: 0rpx;left: 0rpx;
		&__box {
			width: 560rpx;height: 296rpx;border: 2rpx solid #000000;background-color: #FFFFFF;position: absolute;top: 46.6%;left: 50%; transform: translate(-50%,-50%);border-radius: 12rpx;overflow: hidden;
			&__title {
				height: 200rpx;display: flex;align-items: center;justify-content: center;
			}
			&__button {
				width: 100%;height: 92rpx;display: flex;align-items: center;border-top: 2rpx solid rgba(0,0,0,0.04);justify-content: center;
				&__no {
					width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;color: rgba(153,153,153,1);background-color: #FFFFFF;font-size: 30rpx;
				}
				&__yes {
					width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;border-left: 2rpx solid rgba(0,0,0,0.04);color: rgba(49,114,182,1);background-color: #FFFFFF;font-size: 30rpx;font-weight: 700;
				}
			}
		}
	}
</style>
